//首页
import React, { Component } from 'react';
import axios from 'axios';
import Baokuan from "./components/baokuan/Baokuan"
import Miji from "./components/miji/miji"
import Remai from "./components/remai/remai"
import Tupian from "./components/tupian"
import Jingping from "./components/jingping"
import {baokuanData} from "../../api/product"

import { Tabs } from 'antd';
import "./index.scss"
import {
  
    SmileOutlined,
  } from '@ant-design/icons';
// import {Route,Link} from "react-router-dom"

const { TabPane } = Tabs;
class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            baokuanList: [],
            remaiList:[],
            mijiList:[]
        }
    }
    componentDidMount() {
        baokuanData().then(res=>{
            this.setState({
                baokuanList: res.data.data.item_list
            })
        })
        // axios.get('/item/ws/group_list?current_page=1&page_size=9&group_id=40313&device_id=e9c55d50-a637-11eb-a567-2349b4d847f2').then(res => {
        //     this.setState({
        //         baokuanList: res.data.data.item_list
        //     })
        // });
        axios.get('/item/ws/group_list?current_page=1&page_size=9&group_id=37738&device_id=2f41d8f0-a66e-11eb-b610-23bea9e8c871').then(res => {
            console.log(res.data.data.item_list);
            this.setState({
                mijiList: res.data.data.item_list
            })
        });
        axios.get('/item/ws/group_list?current_page=1&page_size=9&group_id=37740&device_id=2f41d8f0-a66e-11eb-b610-23bea9e8c871').then(res => {
            this.setState({
                remaiList: res.data.data.item_list
            })
        });
    }
    componentWillUnmount() {
        this.setState(()=>{
            return;
        })
    }
    render() {
        const {baokuanList,mijiList,remaiList}=this.state
        // const {routers}=this.props

        return (<div className="main" style={{paddingTop:"80px"}}>
            <div style={{padding:'10px'}}>
                <b style={{marginRight:"35px"}}><span><SmileOutlined/> 屈臣氏全国送</span></b>
                <span><SmileOutlined/> 屈臣氏精选></span>
                <span><SmileOutlined/> 正品保证</span>
                <span><SmileOutlined/> 满68包邮</span>
                <span>></span>
            </div>

            {/* <div>
                {
                    routers.map(({path,component,name},index)=><Link key={index} to={path}>{name}</Link>)
                }

            </div> */}
            {/* 嵌套子路由 */}
            {/* <div className="mian_child">
        {
            routers.map(({path,component},index)=><Route key={index} path={path} component={component} />)
        }
            </div> */}
            <Tupian/>

            <Tabs defaultActiveKey="1" style={{width:"100%"}}>
                <TabPane tab="当季爆款" key="1">
                <Baokuan baokuanList={baokuanList} />
                </TabPane>
                <TabPane tab="美白秘籍" key="2">
                <Miji mijiList={mijiList}/>
                </TabPane>
                <TabPane tab="屈家热卖" key="3">
                <Remai remaiList={remaiList}/>

                </TabPane>
            </Tabs>
            <Jingping/>
        </div>);
    }
}
export default Main;